<template>
  <Teleport to="body">
    <Transition name="bounce" @after-enter="onAfterEnter">
      <div v-if="show" class="float-screen">
        <div class="float-screen-container">
          <div class="avatar">
            <img
              src="https://soundoss.ppkaihei.com/tw/file/room/969f443549b1408094e255fe5d90dbd2.jpg"
              style="width: 48px; height: 48px; border-radius: 24px"
              alt=""
            />
          </div>
          <div class="content">
            <div class="name">{{ floatData.name }}</div>
            <div class="to">{{ floatData.to }}</div>
            <div class="other">{{ floatData.other }}</div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
  floatData: {
    type: Object,
    required: true
  }
});
const emit = defineEmits(["complete"]);
const show = ref(false);

function onAfterEnter(el) {
  emit("complete");
  el.remove();
}
onMounted(() => {
  show.value = true;
});
</script>

<style scoped lang="scss">
.float-screen {
  position: fixed;
  top: 40px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 540px;
  height: 72px;
  background: url("@/assets/background/float-screen.png") no-repeat center center;
  background-size: contain;
  transform: translateX(100vw);
}
.float-screen-container {
  display: flex;
  align-items: center;
  width: 387px;
  height: 54px;
  border-radius: 0;
  .avatar {
    width: 52px;
    height: 52px;
    margin-right: 8px;
    img {
      width: 48px;
      height: 48px;
      border: 2px solid rgb(255 255 255 / 50%);
    }
  }
  .content {
    .name {
      height: 18px;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      color: #ffffff;
      text-align: left;
    }
    .to {
      height: 18px;
      margin-top: 4px;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      color: #ffdf80;
      text-align: left;
    }
    .other {
      height: 18px;
      margin-top: 4px;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      color: rgb(255 255 255 / 70%);
      text-align: left;
    }
  }
}
.bounce-enter-active {
  animation: bounce-in 2.2s ease-in-out;
}

@keyframes bounce-in {
  0% {
    transform: translateX(100vw);
  }
  13% {
    transform: translateX(calc(50vw - 270px));
  }
  87% {
    transform: translateX(calc(50vw - 270px));
  }
  100% {
    transform: translateX(-540px);
  }
}
</style>
